<template>
  <div>
    <el-dialog title="分配角色" :visible="roleShow" v-loading="loading">
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{
          item.name
        }}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer">
        <el-button type="primary" @click="editrole">确定</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleListApi, addRoleAssignApi } from '../../../api/role'
import { getEmployeesApi } from '../../../api/employees'
export default {
  props: ['roleShow', 'userId'],
  data () {
    return {
      checkList: [],
      roleList: [],
      loading: false
    }
  },
  created () {},
  methods: {
    async getRole (id) {
      this.loading = true
      const { roleIds } = await getEmployeesApi(id)
      const res = await getRoleListApi()
      this.checkList = roleIds
      this.roleList = res.rows
      console.log(this.checkList, this.roleList)
      this.loading = false
    },
    close () {
      this.$emit('update:roleShow', false)
    },
    async editrole () {
      try {
        await addRoleAssignApi({
          id: this.userId,
          roleIds: this.checkList
        })
        this.$message.success('操作成功')
      } catch (err) {
        this.$message.error(err.message)
      }
      this.$emit('update:roleShow', false)
      this.$emit('getEmpList')
    }
  }
}
</script>

<style></style>
